<template>
  <div class="home">
    <h1>用户列表</h1>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="c">
      <!-- 输入框 -->
      <div class="top">
        <!-- <el-input class="inp" placeholder="请输入内容" v-model="page.query">
          <template slot="append"><p @click="search">搜索</p></template>
        </el-input> -->
        <el-input
          placeholder="请输入内容"
          v-model="page.query"
          class="input-with-select inp"
        >
          <el-button @click="sch" slot="append" icon="el-icon-search"
            >搜索</el-button
          >
        </el-input>
        <el-button class="btn" type="primary" @click="add">添加用户</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="wychange(scope.row.id, scope.row.mg_state)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="caozuo" width="300px" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="edit(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="deletea(scope.row.id)"
            ></el-button>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-setting"
              @click="roles(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="page.pagesize"
        :total="total"
      >
      </el-pagination>
      <!-- 点击添加弹出框 -->
      <el-dialog title="添加用户" :visible.sync="dialogVisible" width="30%">
        <!-- 表单 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role_name">
            <el-input v-model="ruleForm.role_name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button type="info" @click="resetForm('ruleForm')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 点击编辑弹出框 -->
      <el-dialog title="编辑用户" :visible.sync="dialogVisible1" width="30%">
        <!-- 表单 -->
        <el-form
          :model="ruleForm1"
          :rules="rules1"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm1.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm1.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="ruleForm1.mobile"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm1('ruleForm')"
              >立即编辑</el-button
            >
            <el-button type="info" @click="resetForm1('ruleForm')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 点击分配角色 -->
      <el-dialog
        title="分配用户角色"
        :visible.sync="dialogVisible2"
        width="30%"
        height="80%"
      >
        <p>当前用户名：{{ wy.username }}</p>
        <!-- <p>当前用户ID：{{ wy.id }}</p> -->
        <p>当前用户角色：{{ wy.role_name }}</p>
        <!-- 下拉框 -->
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="xxx">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getusers,
  postusers,
  deleteusers,
  putchange,
  putusers,
  getroles,
  getrole,
} from "@/Api";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      page: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      wy: {
        username: "",
        role_name: "",
        id: "",
      },
      ruleForm: {
        username: "",
        email: "",
        mobile: "",
        role_name: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入用户邮箱", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入用户电话", trigger: "blur" },
        ],
        role_name: [
          { required: true, message: "请输入用户角色", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
        ],
      },
      ruleForm1: {
        username: "",
        email: "",
        mobile: "",
        id: "",
      },
      rules1: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入用户邮箱", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入用户电话", trigger: "blur" },
        ],
      },
      options: [],
      value: "",
    };
  },
  mounted() {
    // this.getlist()
  },
  methods: {
    xxx() {
      let data = {
        id: this.wy.id,
        rid: this.value,
      };
      console.log(data);
      getrole(data).then((res) => {
        console.log(res);
        if (res.meta.status === 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.dialogVisible2 = false;
          this.getlist();
        }
      });
    },
    //点击角色
    roles(row) {
      console.log(row);
      this.dialogVisible2 = true;
      this.wy.username = row.username;
      this.wy.role_name = row.role_name;
      this.wy.id = row.id;
      this.value = row.role_name;
      getroles().then((res) => {
        console.log(res);
        this.options = res.data;
      });
    },
    // 点击编辑
    edit(row) {
      this.dialogVisible1 = true;
      console.log(row);
      this.ruleForm1.username = row.username;
      this.ruleForm1.email = row.email;
      this.ruleForm1.mobile = row.mobile;
      this.ruleForm1.id = row.id;
    },
    // 改变状态
    wychange(id, state) {
      putchange(id, state).then((res) => {
        console.log(res);
        if (res.meta.status === 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
        }
      });
    },
    handleSizeChange(val) {
      console.log(val, "1111111"); //一页显示多少条
      this.page.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      console.log(val, "22222"); //当前的页码
      this.page.pagenum = val;
      this.getlist();
    },
    getlist() {
      let wy = {
        pagenum: this.page.pagenum,
        pagesize: this.page.pagesize,
        query: this.page.query,
      };
      getusers(wy).then((res) => {
        // console.log(res);
        this.tableData = res.data.users;
        this.total = res.data.total;
        console.log(this.total);
      });
    },
    // 删除
    deletea(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //   this.$message({
          //     type: "success",
          //     message: "删除成功!",
          //   });
          deleteusers(id).then((res) => {
            console.log(res);

            if (res.meta.status === 200) {
              this.$message({
                message: res.meta.msg,
                type: "success",
              });
            } else {
              this.$message({
                message: res.meta.msg,
                type: "error",
              });
            }
            // 渲染
            this.getlist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    add() {
      this.dialogVisible = true;
    },
    sch() {
      console.log(111);
      // 重新渲染一下页面
      this.getlist();
    },
    // 这是添加的
    submitForm(formName) {
      console.log(formName, "111111");
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          //   alert("submit!");
          // let pages = {
          //   username: this.ruleForm.username,
          //   password: this.ruleForm.password,
          //   email: this.ruleForm.email,
          //   mobile: this.ruleForm.mobile,
          //   role_name: this.ruleForm.role_name,
          // };
          // postusers(pages).then((res) => {
          //   console.log(res);
          //   if (res.meta.status === 201) {
          //     this.$message({
          //       message: res.meta.msg,
          //       type: "success",
          //     });
          //   }
          //   // 关闭模态框
          //   this.dialogVisible = false;
          //   // 渲染到页面
          //   this.getlist();
          //   // 输入框清空
          //   this.ruleForm.username = "";
          //   this.ruleForm.email = "";
          //   this.ruleForm.mobile = "";
          //   this.ruleForm.password = "";
          //   this.ruleForm.role_name = "";
          // });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 这是编辑的
    submitForm1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let bady = {
            id: this.ruleForm1.id,
            email: this.ruleForm1.email,
            mobile: this.ruleForm1.mobile,
          };
          putusers(bady).then((res) => {
            console.log(res);
            if (res.meta.status === 200) {
              this.$message({
                message: res.meta.msg,
                type: "success",
              });
              this.dialogVisible1 = false;
              //   渲染
              this.getlist();
            } else {
              this.$message({
                message: res.meta.msg,
                type: "error",
              });
            }
          });
        }
      });
    },
    resetForm1(formName) {
      this.$refs[formName].resetFields();
    },
  },
  components: {},
  created() {
    this.getlist();
    this.xxx();
  },
};
</script>

<style lang='scss' scoped>
h1 {
  color: #fff;
}
.top {
  width: 100vw;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 15px;
}
.inp {
  width: 30%;
}
.btn {
  margin-left: 10px;
}
.c {
  background-color: #34429a;
  margin-top: 10px;
}
.el-button--small {
  background-color: #34429a !important;
}
</style>
